<template>
	<view class="body">
		<view class="container pt40 p30">
			<view class="bg-white section br32 mb40 p40">
				<view class="d-b-c">
					<view class="title f32">{{ item.courseName }}</view>
					<view class="white f28 pt5 pb5 pl20 pr20 bg-blue br20">
						￥{{ item.unitPrice }}/天
					</view>
				</view>
				<view class="f28 d-b-c mt20">
					<view class="">
						<view class="gray9">课程日期</view>
						<view class="mt5">2025-07-08 至 2025-08-31</view>
					</view>
					<view class="">
						<view class="gray9">名额状态</view>
						<view class="mt5">充足</view>
					</view>
				</view>
				<view class="f28 d-b-c mt20">
					<view class="">
						<view class="gray9">上课时间</view>
						<view class="mt5">08:30 - 17:00</view>
					</view>
					<view class="-1">
						<view class="gray9">适龄范围</view>
						<view class="mt5">4-12岁</view>
					</view>
				</view>
				<view class="mt40">
					<view class="f28">
						选择报名子女
						<text class="red">*</text>
					</view>
					<view class="f28 mt20">
						{{ student.studentName }}（{{ student.age }}岁）
					</view>
				</view>
				<view class="mt40">
					<view class="f28">
						选择校区
						<text class="red">*</text>
					</view>
					<picker
						v-if="list[0]"
						class="picker mt20 br12"
						:range="list"
						range-key="name"
						@change="setIndex"
						:value="index">
						<view class="d-b-c f28 name p20">
							<text>{{ list[index].name }}</text>
							<u-icon name="arrow-down" size="15"></u-icon>
						</view>
					</picker>
				</view>
				<view class="d-b-c mt40">
					<view class="flex-1 mr20">
						<view class="f28">
							开始日期
							<text class="red">*</text>
						</view>
						<picker
							start="2025-07-08"
							end="2025-08-31"
							:value="date1"
							class="date mt20 p20 br12"
							mode="date"
							@change="setDate('date1', $event)">
							<view class="d-b-c f28">
								<text>{{ date1 }}</text>
								<i class="iconfont icon-rili1"></i>
							</view>
						</picker>
					</view>
					<view class="flex-1">
						<view class="f28">
							结束日期
							<text class="red">*</text>
						</view>
						<picker
							start="2025-07-08"
							end="2025-08-31"
							:value="date2"
							class="date mt20 p20 br12"
							mode="date"
							@change="setDate('date2', $event)">
							<view class="d-b-c f28">
								<text>{{ date2 }}</text>
								<i class="iconfont icon-rili1"></i>
							</view>
						</picker>
					</view>
				</view>
				<view class="mt40 o-h">
					<view class="f28">报名天数（最多10天,不含周六日）</view>
					<u-slider disabled :value="day" max="10"></u-slider>
					<view class="d-b-c f22">
						<view class="">最少:1天</view>
						<view class="blue">{{ day }}天</view>
						<view class="">最多:10天</view>
					</view>
				</view>
			</view>
			<view class="bg-white section br32 mb40 p40">
				<view class="d-b-c p20 f28">
					<view class="">课程单价:</view>
					<view class="">￥{{ item.userPay }}/天</view>
				</view>
				<view class="d-b-c p20 f28">
					<view class="">报名天数:</view>
					<view class="">{{ day }}天</view>
				</view>
				<view class="d-b-c line p20 f28">
					<view class="">子女数量:</view>
					<view class="">1人</view>
				</view>
				<view class="d-b-c p20 fb f32 blue">
					<view class="">费用总价:</view>
					<view class="">￥{{ item.userPay * day }}</view>
				</view>
			</view>
			<u-button
				throttle-time="1000"
				text="立即报名"
				color="#4cc9f0"
				@click="getCount"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			date1: "2025-07-08",
			date2: "2025-07-08",
			list: [], //学校
			index: 0,
			item: {},
			student: {},
			orderId: "", //订单id
			timer: false,
		};
	},
	computed: {
		day() {
			return this.daysUntil(this.date1, this.date2);
		},
	},
	onLoad(options) {
		this.item = JSON.parse(options.item);
		this.student = JSON.parse(options.student);
		console.log(this.item, this.student);
		this.getList();
	},
	methods: {
		boolNum() {
			const time1 = new Date("2025-08-18 12:00:00");
			const time2 = new Date();
			return time1 > time2;
		},
		async getCount() {
			// return this.$showToast('人工核对信息中，如需报名请与招生老师联系，如需获取联系方式回复电话即可。')
			// console.log(this.boolNum());
			// if (this.boolNum())
			// 	return this.$showToast("请在2025年6月18号12点开始报读");
			const res = await this.$request({
				url: this.$api.count,
			});
			// if (res >= 220) return this.$showToast("该订单数量已达上限");
			if (res >= 240) return this.$showToast("该订单数量已达上限");
			if (this.day <= 0)
				return this.$showToast("最小报名天数不能小于等于0天");
			if (this.day > 10)
				return this.$showToast("最多报名天数不能超过10天");
			this.save();
		},
		async save() {
			if (this.timer) return;
			this.timer = true;
			const res = await this.$request({
				url: this.$api.addOrder,
				method: "POST",
				data: {
					parentId: uni.getStorageSync("user").id,
					studentId: this.student.id,
					totalPrice: this.item.userPay * this.day, //总价
					companyPayment: this.item.companyPay * this.day, //公司支付
					employeePayment: this.item.userPay * this.day, //员工支付
					remark: this.item.courseName, //备注
					schoolId: this.list[this.index].id, //学校id
					orderDetailXcxList: [
						{
							courseId: this.item.id, ///课程id
							quantity: this.day, //数量
							totalAmount: this.item.userPay * this.day, //总价
							companyPay: this.item.companyPay * this.day, //公司支付金额
							employeePay: this.item.userPay * this.day, //员工支付金额
							startTime: this.date1,
							endTime: this.date2,
						},
					],
				},
			});
			if (res.data) {
				this.orderId = res.data.orderId;
				this.pay(res.data);
				return;
			}
			this.$showToast(res.msg);
			this.timer = false;
		}, //计算时间范围内除去星期六星期日的天数
		daysUntil(startDate, endDate) {
			let start = new Date(startDate);
			let end = new Date(endDate);
			let count = 0; // 循环遍历日期范围
			while (start <= end) {
				// 获取当前日期是星期几 (0: Sunday, 1: Monday, ..., 6: Saturday)
				let dayOfWeek = start.getDay(); // 如果是工作日 (1-5 代表周一到周五)
				if (dayOfWeek >= 1 && dayOfWeek <= 5) {
					count++;
				} // 将日期增加一天
				start.setDate(start.getDate() + 1);
			}
			console.log(count);
			return count;
		},
		// daysUntil(fixedDate) {
		// 	// 将字符串日期转换为日期对象
		// 	const targetDate = new Date(fixedDate);
		// 	// 获取今天的日期
		// 	const today = new Date(this.date1);
		// 	// 将日期转换为毫秒数
		// 	const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
		// 	// 计算两个日期之间的差异（以毫秒为单位）
		// 	const diff = targetDate - today;
		// 	// 将差异转换为天数
		// 	return Math.ceil(diff / oneDay);
		// },
		setDate(name, e) {
			// if (this.daysUntil(e.detail.value) > 20) return this.$showToast('最多选择20天');
			this[name] = e.detail.value;
		},
		setIndex(e) {
			this.index = e.detail.value;
		},
		pay({ appId, timeStamp, nonceStr, package_str, signType, paySign }) {
			WeixinJSBridge.invoke(
				"getBrandWCPayRequest",
				{
					appId, //公众号ID，由商户传入
					timeStamp, //时间戳，自1970年以来的秒数
					nonceStr, //随机串
					package: package_str,
					signType, //微信签名方式：
					paySign, //微信签名
				},
				(res) => {
					// showToast(res.err_msg);
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						this.jump(
							`/pages/order/scuess?orderId=${this.orderId}`
						);
					} else {
						this.$showToast("取消支付！");
					}
					this.timer = false;
				}
			);
		},
		async getList() {
			const res = await this.$request({
				url: this.$api.school,
			});
			this.list = res;
		},
	},
};
</script>

<style scoped lang="scss">
.date {
	border: 1px solid #ececec;
}

.picker {
	border: 1px solid #ececec;
}

.title {
	color: #4c65ee;
}
</style>
